<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <% 
String path = request.getContextPath(); 
// 获得项目完全路径（假设你的项目叫MyApp，那么获得到的地址就是 http://localhost:8080/MyApp/）: 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<!DOCTYPE html>
<html>
<head>
<base href=" <%=basePath%>"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="全部书籍">
<meta name="author" content="xwj">
<title>商品</title>
<link rel="stylesheet" href="css/user_css/css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/user_css/css/font-awesome.min.css" />
        <!-- Custom CSS -->
        <link href="public_user/style.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="jsutil/sweetalert.css">
              <!-- 自定义样式 -->
	<link  href="css/user_css/css/button_style/buttonStyle.css" rel="stylesheet">
        
         <style type="text/css">
        
   #select_book{
        heigth:40px;
         border:  1px   solid  #DDDDDD;    /*下边框线*/
         margin-bottom:30px;
        }

 #select_book #wrapper {
    width: 600px;
}
/*设置h2的样式*/
 #select_book h2 {
    background: #404040;
    /*CSS3：为元素盒子设置圆角*/
    border-radius: 5px;
    box-shadow: 3px 3px 3px #CCC;
    font-size: 1.1em;
    margin: 12px;
    padding: 0.3em 1em;
    color: #FFF;
}
/*把fieldset的默认样式去掉*/
 #select_book fieldset {
    background: #F1F1F1;
    border: none;
    border-radius: 5px;
    margin-bottom: 12px;
}
 #select_book ul {
    background: #FFF;
    border: 1px solid #EAEAEA;
    /*去掉ul的默认的点效果*/
    list-style: none;
    margin: 12px;
    padding: 12px;
}
/*设置li的上下距离*/
 #select_book li {
    margin: 10px 0px;
}
/*修改元素的类型：把行内元素改成块级元素（即可以兼具元素的特点、又设置了大小）*/
 #select_book label {
    display: inline-block;
    text-align: right;
}


    </style>
</head>
<body>
     <!--header start-->
     <%@include file="header.jsp"%>
      <!--header end-->
      <!-- heading-banner-start -->
        <div class="heading-banner">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-xs-12">
                        <div class="breadcrumb">
                            <a title="Return to Home" href="public_user/index.jsp">
                                <i class="icon-home"></i>
                            </a>
                            <span class="navigation-page">
                                <span class="navigation-pipe">></span>
                                Shop
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- heading-banner-end         data-wow-duration=".5s" data-wow-delay=".5s" -->

		
         <!-- shop-area-start -->
        <div class="shop-area">
            <div class="container">
                			  <!-- 以下是查询条件 -->
                             <div id="select_book">
					<form method="get" action="">
            		<fieldset>
               		 <h2>所有书籍</h2>
                	<ul>
                    <li>
                    <!-- label的for属性的值必须和input的name值一样 -->
                        <label for="yourName">出版日期</label>
                        <input type="date" placeholder="Enter Your Name" name="beginDate" onchange="getBooksList(1)">
                         <label for="yourName">至</label>
                        <input type="date"  placeholder="Enter Your Name" name="endDate" onchange="getBooksList(1)">
                    </li>
                    <li>
                        <label for="yourName">价格区间</label>
                        <input type="number" name="beginPrice" onchange="getBooksList(1)">
                         <label for="yourName">至</label>
                        <input type="number" name="endPrice" onchange="getBooksList(1)">
                    </li>
                    <li>
                        <label for="pwd">&nbsp&nbsp类&nbsp&nbsp别&nbsp&nbsp</label>
                        <select class="" name="cid" onchange="getBooksList(1)">
						 </select>
                    </li>
                   
                </ul>
            </fieldset>

        </form>
                             </div>
                             
                             <!-- 以下是显示内容 -->
                              <div class="shop-category-product">
                                    <div class="row">
                                        <div class="category-product">
                                            <!-- Tab panes -->
                                            <div class="tab-content">
                                                <div role="tabpanel" class="tab-pane active fade in" id="gried_view">
                                                    <div class="col-md-3 col-sm-6 col-xs-12 mar-bot">
                                                        <!-- single-product-start -->
                                                        <div class="single-product">
                                                            <div class="single-product-img">
                                                                <a href="#">
                                                                    <img src="images/books_pic/ddb1.jpg" alt="" />
                                                                </a>
                                                                <span class="sale-box">
                                                                    <span class="sale">类别名</span>
                                                                </span>
                                                            </div>
                                                            <div class="single-product-content">
                                                                <div class="product-title">
                                                                    <h5>
                                                                        <a href="#">书名</a>
                                                                    </h5>
                                                                    <h6>作者</h6>
                                                                </div>
                                                          
                                                                <div class="price-box">
                                                                    <span class="price">￥50.00</span>
                                                                    <span class="old-price">￥70.00</span>
                                                                </div>
                                                                <div class="product-action">
                                                                    <button class="button btn btn-default add-cart" title="加入购物车">加入购物车</button>
                                                                   
                                                                    <a class="quick-view" href="#" title="详情信息"  >
                                                                      		 查看
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- single-product-end -->
                                                    </div>
                                                </div>
                                                
                                        	</div>
                                        </div>
                                    </div>
                                      				<div class="" id="mypage">
													<jsp:include flush="fasle" page="/jsutil/pagetool.jsp" />
													</div>
                                </div>
                            </div>
                        </div>
      
        <!-- shop-area-end -->
      
  <!--footer start-->
   <%@include file="footer.jsp"%>
   <!--footer end-->
   <script src="css/user_css/js/vendor/jquery-1.12.0.min.js"></script>
        <!-- bootstrap js -->
        <script src="css/user_css/js/bootstrap.min.js"></script>
        <!-- owl.carousel js -->
        <script src="css/user_css/js/owl.carousel.min.js"></script>
        <!-- meanmenu js -->
        <script src="css/user_css/js/jquery.meanmenu.js"></script>
        <!-- countdown js -->
        <script src="css/user_css/js/countdown.js"></script>
        <!-- jquery.nivo.slider.pack js -->
        <script src="css/user_css/js/jquery.nivo.slider.pack.js"></script>
        <!-- jquery-ui.min.js -->
        <script src="css/user_css/js/jquery-ui.min.js"></script>
        <!-- wow js -->
        <script src="css/user_css/js/wow.min.js"></script>
        <!-- plugins js -->
        <script src="css/user_css/js/plugins.js"></script>
        <!-- main js -->
        <script src="css/user_css/js/main.js"></script>
        <!-- 分页工具 -->
	<script type="text/javascript" src="jsutil/pagetool.js"></script>
	<!-- 弹出框工具 -->
		<script type="text/javascript" src="jsutil/sweetalert.min.js"></script>
        <script type="text/javascript">
        var pageNum = 1;
        var searchKey;
        $(function(){
        	//获取其他页面传过来的查询条件
        	var h=window.location.href;
    		var a=h.split("?searchKey=");
    		searchKey=decodeURI(a[1]);
    		if(searchKey==="undefined" || searchKey==="") searchKey=null;
    		$("input[name='searchKey']").val(searchKey);
        	getCategory();
        	getBooksList(1);
        });
    

        //或许书籍信息
        function getBooksList(pageNum){
        	var typeId=$("select[name='cid']").val();
    		var beginDate=$("input[name='beginDate']").val();
    		var endDate=$("input[name='endDate']").val();
    		if((new Date(beginDate))>(new Date(endDate))){
    			$("input[name='startDate']").val("");
    			$("input[name='endDate']").val("");
    			alert("起始时间不可大于终止时间！");
    			return ;
    		}
    		var beginPrice=$("input[name='beginPrice']").val();
    		var endPrice=$("input[name='endPrice']").val();	
    		if(parseFloat(beginPrice)>parseFloat(endPrice)){
    			$("input[name='beginPrice']").val("");
    			$("input[name='endPrice']").val("");
    			//swal("起始价格不可大于终止价格！", { icon: "info", });
    			return ;
    		}
    		//顶部条件查询
    		var searchKey=$("input[name='searchKey']").val();
        	$.ajax({
     			url : "booksMsg/getBooksListByCondition.do", // 请求地址
     			type : "POST", // 请求类型
     			async : "true", // 是否异步方式
     			data : {"num":pageNum,
     					"cid":typeId,
     					"beginDate":beginDate,
     					"endDate":endDate,
     					"beginPrice":beginPrice,
     					"endPrice":endPrice,
     					"key":searchKey
     				},
     			dataType : "json", // 返回数据格式
     			success : function(data) {
     				//响应成功
     				if (data.res>0) {
     					var bookList=$("#gried_view");
     					bookList.empty();
     					//有符合条件的
     					if(data.totalPage>0){
     						$.each(data.list,function(index, element) {
     	     					var divs="<div class='col-md-3 col-sm-6 col-xs-12 mar-bot'>"
     	                         +"<div class='single-product'>"
     	                             +"<div class='single-product-img'>"
     	                                +" <a href='javascript:detail("+element.bid+")'>"
     	                                    +" <img src='"+element.bpicurl+"' alt='' />"
     	                                 +"</a>"
     	                               
     	                             +"</div>"
     	                             +"<div class='single-product-content'>"
     	                                +" <div class='product-title'>"
     	                                     +"<h5> <a href='#'>"+element.bname+"</a> </h5>"
     	                                    +" <h6>"+element.bauthor+"</h6>"
     	                                 +"</div>"
     	                                 +"<div class='price-box'>"
     	                                    +" <span class='price'>￥"+element.bprice+"</span>"
     	                                    +" <span class='old-price'>￥"+element.borgprice+"</span>"
     	                                   +"</div>"
     	                                 +"<div class='product-action'>"
     	                                   +"<button class='button btn btn-default add-cart' title='加入购物车'"
     	                                   +"onclick=addShopCart("+element.bid+")>加入购物车</button>"
     	                                    +" <a class='quick-view' href='javascript:detail("+element.bid+")' title='详情信息'> 查看</a>"
     	                                    +"</div>"
     	                                    +"</div>"
     	                                    +"</div>"
     	                                    +"</div>";
     	                           $("#gried_view").append(divs);
     	     						});
     						}else{//没有符合条件的
     							var divs="<div class='col-md-12 col-sm-12 col-xs-12 mar-bot'>"
     							+"<h3>没有相关书籍，换个条件试试O(∩_∩)O</h3>"
     							+"</div>"
     					 	  $("#gried_view").append(divs);
     						}
     					setPage(pageNum, data.totalPage, "getBooksList");
     					
     				}
     			}
     		});
        }

        //获取书籍类别
        function getCategory(){
		$.post("categoryMsg/getAllCategory.do",{},
			function(data){
				var theme=$("select[name='cid']");
				theme.empty();
				theme.append("<option value='-1' selected>请选择</option>");
				$.each(data.list,function(index,element){
					
					theme.append("<option value='"+element.cid+"'>"+element.cname+"</option>");
				});
			},"json"); 
	
	}
        //添加购物车
        function addShopCart(bid){
   		$.ajax({
    			url : "shopCartMsg/addNewCart.do", // 请求地址
    			type : "POST", // 请求类型
    			async : "true", // 是否异步方式
    			data : {"bid":bid},
    			dataType : "json", // 返回数据格式
    			success : function(data) {
    				if(data.res==0){
    					alert("请先登录！");
    				}
    				if (data.res>0) {
    					alert("添加成功");
    					//更新头部购物车
     					getMyCarInfo();
    					
    				}
    			}
    		});
       }
        /* 跳转到图书详情界面  */
	 	function detail(bookId){
	 		window.location.href="public_user/detail.jsp?id="+bookId;
	 	}
        </script>
</body>
</html>